<template>  
      <el-menu
        :default-active="infotype"
        mode="horizontal"
        @select="setInfotype"
        class="menus"
        background-color="rgb(48, 65, 86)"
        text-color="rgb(191, 203, 217)"
        active-text-color="#409eff"
        :router="true"
      >
        
      <el-menu-item :index="'/xm/product/view/overview?productId='+xmProduct.id">
        <template #title>
          <div class="flex items-center"
            style="max-width: 25em;"  
            :title="xmProduct.productName"
          >
          <el-avatar style="background-color:#409EFF;width:50px;min-width: 50px;border: 2px solid silver;">产品</el-avatar>&nbsp;<el-text size="large" truncated type="primary"><div style="font-weight: 600; font-size: 20px; color: #409EFF">{{ xmProduct.productName }}</div></el-text> 
          </div> 
        </template> 
        </el-menu-item> 
				<el-menu-item label="需求" :index="'/xm/product/view/menu?productId='+xmProduct.id">
					 <template #title><icon icon="fa:envira"/>需求</template> 
				</el-menu-item> 
        <el-sub-menu index="jihua">
          <template #title><icon icon="fa:google-plus-circle"/>计划</template>
          <el-menu-item :index="'/xm/product/view/plan?productId='+xmProduct.id">
            <template #title><icon icon="ep:stopwatch"/>总体计划</template>
          </el-menu-item>  
          
          <el-menu-item :index="'/xm/product/view/iteration?productId='+xmProduct.id">
            <template #title><icon icon="ep:connection"/>迭代计划</template>
          </el-menu-item> 
          <el-menu-item :index="'/xm/product/view/test/plan?productId='+xmProduct.id">
            <template #title><icon icon="fa:fire"/>测试计划</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/product/view/task?productId='+xmProduct.id">
            <template #title><icon icon="ep:operation"/>任务列表</template>
          </el-menu-item>  
          <el-menu-item :index="'/xm/product/view/milestone?productId='+xmProduct.id">
            <template #title><icon icon="ep:star-filled"/>里程碑</template>
          </el-menu-item>
        </el-sub-menu>  
        <el-menu-item :index="'/xm/product/view/question?productId='+xmProduct.id">
          <template #title><icon icon="fa:bug"/>问题</template>
        </el-menu-item> 
        <el-sub-menu index="risk">
          <template #title><icon icon="fa-solid:shield-virus"/>风险</template>
          <el-menu-item :index="'/xm/pro/product/view/risk/index?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:shield-virus"/>风险管理</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/risk/overview?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:shield-alt"/>风险分析</template>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item :index="'/xm/product/view/group?productId='+xmProduct.id">
          <template #title><icon icon="fa:sitemap"/>团队</template>
        </el-menu-item> 
        <el-sub-menu index="caiwu">
          <template #title><icon icon="fa-solid:coins"/>财务</template>
          <el-menu-item :index="'/xm/pro/product/view/contract?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:balance-scale"/>合同管理</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/budget?productId='+xmProduct.id">
            <template #title><icon icon="ep:coin"/>预算</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/cost?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:spa"/>费用</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/product/view/workloadDay?productId='+xmProduct.id">
            <template #title
              ><icon icon="fa-solid:user-clock"/>每日工时</template
            >
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/workloadMonth?productId='+xmProduct.id">
            <template #title
              ><icon icon="fa-solid:user-cog"/>每月工时</template
            >
          </el-menu-item>   
        </el-sub-menu>  
        
        <el-sub-menu index="kpi">
            <template #title><icon icon="fa:bar-chart"/>效能</template>
          <el-menu-item :index="'/xm/pro/product/view/kpi/mng?productId='+xmProduct.id">
            <template #title><icon icon="fa:key"/>kpi管理</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/kpi/kself?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:sun"/>我负责的kpi</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/kpi/kadm?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:user-check"/>我审核的kpi</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/kpi/overview?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:chart-line"/>kpi统计分析</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/pro/product/view/kpi/his?productId='+xmProduct.id">
            <template #title><icon icon="fa:history"/>考核记录</template>
          </el-menu-item> 
          <el-menu-item :index="'/xm/pro/product/view/rpt?productId='+xmProduct.id">
            <template #title><icon icon="fa:bar-chart"/>效能分析</template>
          </el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="zhishi">
          <template #title><icon icon="fa:book"/>知识</template>
          <el-menu-item :index="'/xm/product/view/file?productId='+xmProduct.id">
            <template #title><icon icon="ep:document"/>文档</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/product/view/record?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:list"/>日志</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/product/view/dynamics?productId='+xmProduct.id">
            <template #title><icon icon="ep:bell"/>动态</template>
          </el-menu-item>
        </el-sub-menu> 
        
        
        <el-sub-menu index="shezhi">
          <template #title><icon icon="ep:setting"/>设置</template>
          <el-menu-item :index="'/xm/product/view/detail?productId='+xmProduct.id">
            <template #title><icon icon="ep:document"/>产品详情</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/product/view/setting?productId='+xmProduct.id">
            <template #title><icon icon="ep:setting"/>产品配置</template>
          </el-menu-item>  
          <el-menu-item label="模块" :index="'/xm/product/view/func?productId='+xmProduct.id">
            <template #title><icon icon="ep:menu"/>产品模块</template> 
          </el-menu-item>   
          <el-menu-item label="测试库" :index="'/xm/product/view/test/casedb?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:bug"/>产品测试库</template> 
          </el-menu-item>  
          <el-menu-item :index="'/xm/product/view/project?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:project-diagram"/>关联项目</template>
          </el-menu-item> 
          <el-menu-item :index="'/xm/product/view/env?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:list-ol"/>环境清单</template>
          </el-menu-item>
        </el-sub-menu>
         
        <el-sub-menu index="flow">
          <template #title><icon icon="fa-solid:random"/>审批 </template>
 
          <el-menu-item :index="'/xm/product/view/currFlow?productId='+xmProduct.id">
            <template #title><icon icon="fa-solid:random"/>当前审批</template>
          </el-menu-item>
          <el-menu-item :index="'/xm/product/view/hisFlow?productId='+xmProduct.id">
            <template #title><icon icon="fa:calendar-check-o"/>历史审批</template>
          </el-menu-item>  
        </el-sub-menu>
        
        <el-menu-item :index="'/'">
          <template #title><icon icon="fa:home"/></template>
        </el-menu-item>
        <el-menu-item>
           <Screenfull class="custom-hover" color="var(--top-header-text-color)"/> 
        </el-menu-item> 
      </el-menu> 
</template>

<script> 
 
 
import { Screenfull } from '@/layout/components/Screenfull'
import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
import { useXmStore } from '@/store/modules/xm'

export default {
  props: ["visible"],
  computed: {
    ...mapState(useUserStore,["userInfo", "roles"]), 
    ...mapState(useXmStore,["xmProduct"]),
  },
  watch: {
    $route:{
      handler(newVal,oldValu){ 
        this.infotype=newVal.fullPath 
      },
      deep:true,
      immediate:true,
    }
  },
  data() {
    return { 
      infotype:'',  
    };
  }, //end data
  methods: {    
    setInfotype(infotype) {  
        this.infotype = infotype;  
    },   
     
  }, //end methods
  components: {
     
    Screenfull
    //在下面添加其它组件
  }, 
  mounted() {   
    this.infotype=this.$route.fullPath
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.menus {
  .el-menu-item {  
    padding-left: 10px !important; 
    padding-right: 10px !important; 
  }
}
.menus {
  .el-sub-menu{ 
    width:110px; 
  }
}
/* 超过宽度则用...代替 */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.step-btn{
	margin-left:0px;margin-bottom: 5px;
}
</style>
